<template>
	<nut-form>
		<nut-form-item label="服务器地址">
		  <nut-input 
			:disabled="!toggle" 
			v-model="state.url"  
			class="nut-input-text" type="text" />
		</nut-form-item>
		<nut-cell title="操作">
			<template v-slot:link>
				<nut-button @click="ok" type="info">{{ text }}</nut-button>
			</template>
		</nut-cell>
	</nut-form>
</template>

<script setup lang="ts">
import { ref, reactive, computed, toRaw } from 'vue'
import { useSocketCreator } from '@/utils/useSocketCreator'
const toggle = ref<boolean>(false)
const state = reactive({
	url: ''
})
const setter = useSocketCreator(uni, (url: string) => {
	state.url = url
})
const text = computed<string>(() => {
	return toggle.value ? '只读' : '编辑'
})
const ok = () => {
	toggle.value = !toggle.value
	if (toggle.value) {
		setter(toRaw(state).url)
	}
}
</script>